<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <!--导入外部的JS-->
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/progressStep.js"></script>
    <script type="text/javascript" src="js/raphael.js"></script>
   
     
    <!--导入外部的CSS-->
    <link type="text/css" rel="stylesheet" href="css/step.css"/>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript">
	$(document).ready(function (i) {
		var $progressDiv = $("#progressBar");
		var $progressBar = $progressDiv.progressStep();
		$progressBar.addStep("浏览影片");
		$progressBar.addStep("选择场次");
		$progressBar.addStep("选择座位");
		$progressBar.addStep("提交订单");
		$progressBar.addStep("查看订单");
		
		//控制步骤
		$progressBar.setCurrentStep(i);
		$progressBar.refreshLayout();
	});
</script>


</head>
<body>
	<header class="navbar navbar-inverse navbar-static-top" role="">
     <div class="container ">
    	<nav class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">VeryEdu 影院订票系统</a>
        </nav>
         <span class="navbar-collapse collapse" style="float:right;padding-top:5px;">
            <a href="login.html"><button type="submit" class="btn btn-success">Sign in</button></a>
            <a href="login.html"><button type="submit" class="btn btn-success">Register</button></a>
         </span>
       </div>
    </header>
   
    
    <section class="container">
    	<nav id="progressBar" style="height:80px;margin-top:0px;"></nav>
        <div class="row">
  			<!--私人定制-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/PersonalTailor.jpg" data-src="holder.js/300x200">
                    <div class="caption text-center">
					<h4>私人定制<span class="price">&nbsp;&nbsp;￥29</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
            <!--警察故事-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/police.jpg" data-src="holder.js/300x200">
                  	<div class="caption text-center">
					<h4>警察故事<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
             <!--拯救大兵瑞恩-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/Saving-Private-Ryan.jpg" data-src="holder.js/300x200">
                  	<div class="caption text-center">
					<h4>拯救大兵瑞恩<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
            <!--指环王-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/the-lord-of-rings.jpg" data-src="holder.js/300x200">
                  	<div class="caption text-center">
					<h4>指环王<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
            
             <!--变相怪杰-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/The-Mask.jpg" data-src="holder.js/300x200">
                    <div class="caption text-center">
					<h4>变相怪杰<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
             <!--肖克申的救赎-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/the-shawshank-redemption.jpg"  data-src="holder.js/300x200">
                  	<div class="caption text-center">
					<h4>肖克申的救赎<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
             
             <!--金刚狼-->
            <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/jinganglang.jpg" data-src="holder.js/300x200">
                  	<div class="caption text-center">
					<h4>金刚狼<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="#" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
            <!--变相怪杰V2-->
             <article class="col-md-3">
            	<div class="thumbnail">
				  <img src="images/The-Mask.jpg" data-src="holder.js/300x200">
                  	<div class="caption text-center">
					<h4>变相怪杰V2<span class="price">&nbsp;&nbsp;￥47</span></h4>
					<p><a href="filmInfo.html" class="btn btn-primary" role="button">订票</a></p>
					</div>
				</div>
            </article>
            
            
        </div>
    </section>
    
    <footer class="text-center">
        <p >&copy;company 2014</p>
    </footer>
</body>
</html>
